import React, { useState, useEffect } from "react";
import { Space, Table, Button, Modal, Form, Upload, Checkbox, Input } from "antd";
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import Shopchild from "./Shopchild";
import { getshop, addshop, updateshop, deleteshop } from "../../services/shop";
import {url} from "../../services/index"
const { Column } = Table;


export default function List(props) {
  const [shopArr, setShopArr] = useState([]);
  const [modify, setmodify] = useState({});
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isModalOpen1, setIsModalOpen1] = useState(false);
  const [addForm] = Form.useForm();
  
  const [imageUrl, setImageUrl] = useState();
  const [loading, setLoading] = useState(false);
  const [updateObj, setUpdateObj] = useState({})


  const showModal = (data) => {
    setIsModalOpen(true);
    console.log(data.name);
    setmodify(data)

  };
  const addModal = (data) => {
    setIsModalOpen1(true);
  };
  const delModal = async (data) => {
    await deleteshop(data._id)
    show()
    setIsModalOpen1(false)

  };
   //点击确认后预览图片
  const handleChangeImage = (info) => {
    if (info.file.status === 'uploading') {
        setLoading(true);
        return;
    }
    if (info.file.status === 'done') {
        console.log(info.file.response.filename);
        setLoading(false);
        setImageUrl(info.file.response.filename);
    }
}
const handleChangeImage2 = (info) => {
  if (info.file.status === 'uploading') {
      setLoading(true);
      return;
  }
  if (info.file.status === 'done') {
      console.log(info.file.response.filename);
      setLoading(false);
      setmodify({...modify,image:info.file.response.filename});
      setImageUrl(info.file.response.filename);
  }
}

  const [pagination, setPagination] = useState({
    showSizeChanger: true,
    showQuickJumper: true,
    pageSizeOptions: [10, 20, 30, 40, 50],
    showTotal: total => `共 ${total} 条`
  })
  const getPagination = async (curPage, pageSize) => {
    let result = await getshop({ curPage, pageSize })
    result.current = parseInt(result.curPage)
    setPagination({ ...pagination, ...result })
  }
  const show = async () => {
    let result = await getshop()
    setShopArr(result.rows)
  }

  useEffect(() => {
    show()
    getPagination(1, 5)
  }, [0])

  const handleOk = async () => {
    await updateshop({...modify,image:imageUrl})
    show()
    setIsModalOpen(false)
    setmodify({})
    setImageUrl()
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const handleOk1 = async () => {
    await addshop({...modify,image:imageUrl})
    setImageUrl()
    show()
    setmodify({})
    setIsModalOpen1(false)
  };

  const handleCancel1 = () => {
    setIsModalOpen1(false);
  };
  const [open, setOpen] = useState(false);

  // //分页
  const handleChange = (pagination) => {
    // props.show({
    //   current: pagination.current,
    //   pageSize: pagination.pageSize
    // });
  }


  const onFinish = async (values) => {
    let result = await addshop()
    show()
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div>
      <h1>订单管理</h1>
      <Shopchild />
      <Button type="primary" onClick={addModal} >新增店铺</Button>
      <Modal title="新增门店" open={isModalOpen1} onOk={handleOk1} onCancel={handleCancel1}>
        <Form
          form={addForm}
          name="updateForm"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 20 }}
          autoComplete="off"
        >
          <Form.Item
                        label="商品图片"
                        name="image"
                    >
                        <Upload
                            name="file"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action={url + "/upload"}
                            // beforeUpload={beforeUpload}
                            onChange={handleChangeImage}
                        >
                            {imageUrl ? (
                                <img
                                    src={"http://localhost:3000/images/" + imageUrl}
                                    alt="file"
                                    style={{
                                        width: '100%',
                                    }}
                                />
                            ) : (
                                <div>
                                    {loading ? <LoadingOutlined /> : <PlusOutlined />}
                                    <div style={{ marginTop: 8 }}>Upload</div>
                                </div>
                            )}
                        </Upload>
                    </Form.Item>
          <Form.Item label="门店名">
            <Input value={modify.name} onInput={(e) => setmodify({
              ...modify, name: e.target.value
            })} />
          </Form.Item>
          <Form.Item label="门店地址">
            <Input value={modify.address} onInput={(e) => setmodify({
              ...modify, address: e.target.value
            })} />
          </Form.Item>
          <Form.Item label="纬度">
            <Input value={modify.latitude} onInput={(e) => setmodify({
              ...modify, latitude: e.target.value
            })} />
          </Form.Item>
          <Form.Item label="经度">
            <Input value={modify.longitude} onInput={(e) => setmodify({
              ...modify, longitude: e.target.value
            })} />
          </Form.Item>
          <Form.Item label="距离">
            <Input value={modify.distance} onInput={(e) => setmodify({
              ...modify, distance: e.target.value
            })} />
          </Form.Item>
          <Form.Item label="营业时间">
            <Input value={modify.ontime} onInput={(e) => setmodify({
              ...modify, ontime: e.target.value
            })} />
          </Form.Item>
          <Form.Item label="是否营业">
            <Input value={modify.status} onInput={(e) => setmodify({
              ...modify, status: e.target.value
            })} />
          </Form.Item>
        </Form>
      </Modal>

      <Table dataSource={shopArr} pagination={props.pagination} onChange={handleChange} rowKey="_id">
        <Column title="图片" dataIndex="image" align='center' render={(_,b)=><img style={{width:'80px'}} src={url+'/images/'+b.image}/> }/>
        <Column title="门店名" dataIndex="name" />
        <Column title="门店地址" dataIndex="address" />
        <Column title="维度" dataIndex="latitude" />
        <Column title="经度" dataIndex="longitude" />
        <Column title="距离" dataIndex="distance" />
        <Column title="营业时间" dataIndex="ontime" />
        <Column title="是否经营" dataIndex="status" />
        <Column
          title="操作"
          key="action"
          render={(_, record) => (
            <Space size="middle">
              {/* <Button type="primary" onClick={() => handleEdit(record._id)}>修改</Button> */}
              <Button type="primary" onClick={() => { showModal(record) }}>
                修改店铺
              </Button>

              <Button type="danger" onClick={() => { delModal(record) }}>
                删除店铺
              </Button>
              <Modal title="修改门店" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Form
                  // form={xiugaidange}
                  name="updateForm"
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 20 }}
                  autoComplete="off"
                >
                  {/* <Form.Item label="图片">
                    <Input value={modify.image} onInput={(e) => setmodify({
                      ...modify, image: e.target.value
                    })} />
                  </Form.Item> */}
                                    <Form.Item
                        label="门店图片"
                        name="image"
                    >
                        <Upload
                            name="file"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action={url + "/upload"}
                            onChange={handleChangeImage2}
                        >
                            {modify.image ? (
                                <img
                                    src={"http://localhost:3000/images/" + modify.image}
                                    alt="file"
                                    style={{
                                        width: '100%',
                                        height: '100%'
                                    }}
                                />
                            ) : (
                                <div>
                                    {loading ? <LoadingOutlined /> : <PlusOutlined />}
                                    <div style={{ marginTop: 8 }}>Upload</div>
                                </div>
                            )}
                        </Upload>
                    </Form.Item>
                  <Form.Item label="门店名">
                    <Input value={modify.name} onInput={(e) => setmodify({
                      ...modify, name: e.target.value
                    })} />
                  </Form.Item>
                  <Form.Item label="门店地址">
                    <Input value={modify.address} onInput={(e) => setmodify({
                      ...modify, address: e.target.value
                    })} />
                  </Form.Item>
                  <Form.Item label="纬度">
                    <Input value={modify.latitude} onInput={(e) => setmodify({
                      ...modify, latitude: e.target.value
                    })} />
                  </Form.Item>
                  <Form.Item label="经度">
                    <Input value={modify.longitude} onInput={(e) => setmodify({
                      ...modify, longitude: e.target.value
                    })} />
                  </Form.Item>
                  <Form.Item label="距离">
                    <Input value={modify.distance} onInput={(e) => setmodify({
                      ...modify, distance: e.target.value
                    })} />
                  </Form.Item>
                  <Form.Item label="营业时间">
                    <Input value={modify.ontime} onInput={(e) => setmodify({
                      ...modify, ontime: e.target.value
                    })} />
                  </Form.Item>
                  <Form.Item label="是否营业">
                    <Input value={modify.status} onInput={(e) => setmodify({
                      ...modify, status: e.target.value
                    })} />
                  </Form.Item>
                </Form>
              </Modal>









            </Space>
          )}
        />
      </Table>
    </div>
  );
}